<template>
  <div>
    <!-- 试题录入选项组件 -->
    <!-- 单选题 -->
    <el-radio-group
      v-if="questionType==='1'"
      v-model="singleCheck"
      @change="$emit('get-options',options)"
    >
      <el-row class="option-item" v-for="(item,index) in questionSel1" :key="index">
        <el-radio :label="item.label">{{item.label}}：</el-radio>
        <el-input v-model="item.inputVal" @change="$emit('get-options',options)"></el-input>
        <el-upload
          class="upload-demo"
          drag
          action="https://www.liulongbin.top:8888/api/private/v1/upload"
          :data="item"
          :on-preview="handlePreview"
          :on-remove="(file, fileList)=>{handleRemove(file, fileList,item)}"
          :headers="requestHeader"
          :on-success="(response, file, fileList)=>{addImgToForm(response, file, fileList,item)}"
        >
          <div class="el-upload__text">点击上传</div>
        </el-upload>
      </el-row>

      <el-row>
        <el-button type="danger" size="mini" disabled>+增加选项与答案</el-button>
      </el-row>
    </el-radio-group>

    <!-- 多选题 -->

    <el-checkbox-group
      v-else-if="questionType==='2'"
      v-model="manyCheck"
      @change="$emit('get-options',options)"
    >
      <el-row class="option-item" v-for="(item,index) in questionSel2" :key="index">
        <el-checkbox :label="item.label">{{item.label}}：</el-checkbox>
        <el-input v-model="item.inputVal" @change="$emit('get-options',options)"></el-input>
        <el-upload
          class="upload-demo"
          drag
          action="https://www.liulongbin.top:8888/api/private/v1/upload"
          :data="item"
          :on-preview="handlePreview"
          :on-remove="(file, fileList)=>{handleRemove(file, fileList,item)}"
          :headers="requestHeader"
          :on-success="(response, file, fileList)=>{addImgToForm(response, file, fileList,item)}"
        >
          <div class="el-upload__text">点击上传</div>
        </el-upload>
      </el-row>

      <el-row>
        <el-button type="danger" size="mini" @click="addOptions">+增加选项与答案</el-button>
      </el-row>
    </el-checkbox-group>
  </div>
</template>

<script>
import { detail } from "../../api/hmmm/questions";
export default {
  props: ["questionType", "id"],
  components: {},
  created() {
    if (this.id) {
      console.log(123);
      this.getOptionsById();
    } else {
      this.getOptions();
    }
  },
  data() {
    return {
      requestHeader: {
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1OTU4NDQ5NzcsImV4cCI6MTU5NTkzMTM3N30.IWm3I-G2FbzKNCsR4IOYPNj8BU2lJ_y8w3NB_dH1iWw",
      },
      singleCheck: "",
      manyCheck: [],
      // 单选配置
      questionSel1: [],
      // 多选配置
      questionSel2: [],
    };
  },
  computed: {
    options() {
      // 题干的选项
      var options = [];
      if (this.questionType === "1") {
        // 如果是单选
        this.questionSel1.forEach((item) => {
          console.log(item);
          options.push({
            isRight: this.singleCheck == item.label,
            code: item.label,
            title: item.inputVal,
            img: item.img,
          });
        });
        return options;
      } else if (this.questionType === "2") {
        // 多选
        this.questionSel2.forEach((item) => {
          options.push({
            isRight: this.manyCheck.includes(item.label),
            code: item.label,
            title: item.inputVal,
            img: item.img,
          });
        });
        return options;
      }
    },
    // 生成57个字符
    letters() {
      let words = [];
      for (var i = 65, j = 0; i < 122; i++, j++) {
        words[j] = String.fromCharCode(i);
      }
      return words;
    },
  },
  methods: {
    getOptions() {
      // 试题选项配置;
      let arr = [];
      ["A", "B", "C", "D"].forEach((item, index) => {
        arr.push({
          label: item,
          inputVal: "",
          img: "",
        });
      });
      this.questionSel1 = arr;
      this.questionSel2 = arr;
    },
    async getOptionsById() {
      // 根据id试题选项配置;
      this.getOptions();
      try {
        const { data: res } = await detail({ id: this.id });
        console.log(res);
        let arr = [];
        if (res.questionType === "1") {
          // 单选
          res.options.forEach((item, index) => {
            if (item.isRight == 1) {
              this.singleCheck = item.code;
            }
            arr.push({
              label: this.letters[index],
              inputVal: item.title,
              img: item.img,
            });
          });
          this.questionSel1 = arr;
          console.log(this.questionSel1);
        } else if (res.questionType === "2") {
          res.options.forEach((item, index) => {
            if (item.isRight == 1) {
              this.manyCheck.push(item.code);
            }
            arr.push({
              label: this.letters[index],
              inputVal: item.title,
              img: item.img,
            });
          });
          this.questionSel2 = arr;
          console.log(this.questionSel2);
        }
      } catch (err) {
        console.log(err);
      }
    },
    addOptions() {
      // 点击添加选项
      this.questionSel2.push({
        label: this.letters[this.questionSel2.length],
        inputVal: "",
        img: "",
      });
    },
    handleRemove(file, fileList, item) {
      // 删除图片
      item.img = "";
    },
    handlePreview(file) {
      // 返回的图片地址
      console.log(file.url);
    },
    addImgToForm(response, file, fileList, item) {
      // 上传图片成功
      console.log(response.data.url);
      item.img = response.data.url;
      console.log(item);
      this.$emit("get-options", this.options);
    },
  },
};
</script>

<style scoped lang='scss'>
.option-item {
  display: flex;
  align-items: center;
  height: 50px;
  margin-bottom: 15px;
  .el-input {
    width: 240px;
  }
  .el-radio,
  .el-checkbox {
    width: 48px;
    margin-right: 10px;
  }
}

::v-deep.upload-demo {
  margin-left: 5px;
  display: flex;
  .el-upload-dragger,
  .el-upload__text {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-upload-list {
    margin-left: 10px;
  }
}
</style>
